import { ref } from "vue";

// 定义状态类型
interface AppState {
  xdefault: number;
  ydefault: number;
  yvariable: number;
  xpolice: number;
  ypolice: number;
}

// 默认值
const DEFAULT_STATE: AppState = {
  xdefault: 450,
  ydefault: 6400,
  yvariable: 20,
  xpolice: 600,
  ypolice: 50
};

// localStorage 键名
const STORAGE_KEY = 'APP_STATE_V1';

class StateManager {
  // 使用 ref 创建响应式变量
  public xdefault = ref(DEFAULT_STATE.xdefault);
  public ydefault = ref(DEFAULT_STATE.ydefault);
  public yvariable = ref(DEFAULT_STATE.yvariable);
  public xpolice = ref(DEFAULT_STATE.xpolice);
  public ypolice = ref(DEFAULT_STATE.ypolice);

  constructor() {
    this.loadFromLocalStorage();
  }

  // 从 localStorage 加载状态
  private loadFromLocalStorage() {
    const savedState = localStorage.getItem(STORAGE_KEY);
    
    if (savedState) {
      try {
        const parsedState: AppState = JSON.parse(savedState);
        
        // 更新 ref 的值
        this.xdefault.value = parsedState.xdefault;
        this.ydefault.value = parsedState.ydefault;
        this.yvariable.value = parsedState.yvariable;
        this.xpolice.value = parsedState.xpolice;
        this.ypolice.value = parsedState.ypolice;
      } catch (e) {
        console.error('Failed to parse saved state, using defaults', e);
        this.resetToDefaults();
      }
    }
  }

  // 保存当前状态到 localStorage
  public saveToLocalStorage() {
    const currentState: AppState = {
      xdefault: this.xdefault.value,
      ydefault: this.ydefault.value,
      yvariable: this.yvariable.value,
      xpolice: this.xpolice.value,
      ypolice: this.ypolice.value
    };
    
    localStorage.setItem(STORAGE_KEY, JSON.stringify(currentState));
  }

  // 更新状态并保存
  public updateState<K extends keyof AppState>(key: K, value: AppState[K]) {
    switch (key) {
      case 'xdefault':
        this.xdefault.value = value;
        break;
      case 'ydefault':
        this.ydefault.value = value;
        break;
      case 'yvariable':
        this.yvariable.value = value;
        break;
      case 'xpolice':
        this.xpolice.value = value;
        break;
      case 'ypolice':
        this.ypolice.value = value;
        break;
      default:
        throw new Error(`Invalid state key: ${key}`);
    }
    
    this.saveToLocalStorage();
  }

  // 重置为默认值
  public resetToDefaults() {
    this.xdefault.value = DEFAULT_STATE.xdefault;
    this.ydefault.value = DEFAULT_STATE.ydefault;
    this.yvariable.value = DEFAULT_STATE.yvariable;
    this.xpolice.value = DEFAULT_STATE.xpolice;
    this.ypolice.value = DEFAULT_STATE.ypolice;
    this.saveToLocalStorage();
  }
}

// 创建状态管理实例
export const echartsParamsManager = new StateManager();

// // 在页面加载时初始化
// if (typeof window !== 'undefined') {
//   // 确保在客户端执行
//   stateManager.loadFromLocalStorage();
  
//   // 添加页面刷新监听（可选）
//   window.addEventListener('beforeunload', () => {
//     stateManager.saveToLocalStorage();
//   });
// }